<template>
    <div class="container">
        <div id="main" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
import echarts from 'echarts';/* 局部引入echarts */
import mapStyle from '@/js/bMapStyle.js'/* 导入样式函数 */
require("echarts/extension/bmap/bmap")/* 引入echarts扩展 bmap */
export default {
    data (){
        return {    
            icon:['circle','circle','circle','circle','circle','circle','circle','circle'],
        }
    },
    methods: {
        initEchartsOrbMap(){
            let that = this;
            /* ====================初始化======================= */
            let chartDom = document.getElementById('main');
            let myChart = echarts.init(chartDom);
            /* ------------定义地图上标记的数据---------------- */
            const data = [
                { name: '大庆1', value: 273 },
                { name: '大庆2', value: 273 },
                { name: '大庆3', value: 273 },
                { name: '大庆4', value: 273 },
                { name: '大庆5', value: 273 },
                { name: '大庆6', value: 273 },
                { name: '大庆7', value: 273 },
                { name: '大庆8', value: 273 },
                { name: '大庆9', value: 273 },
            ];
            /* ----------------------定义标记的名字与坐标-------------------- */
            const geoCoordMap = {
                大庆1: [114.31808,30.642429],
                大庆2: [114.33964,30.652309],
                大庆3: [114.359331,30.660822],
                大庆4: [114.364289,30.617943],
                大庆5: [114.394329,30.637458],
                大庆6: [114.412079,30.643175],
                大庆7: [114.428895,30.652185],
                大庆8: [114.401659,30.702191],
                大庆9: [114.390017,30.687285]
            };
            let option = this.handleOption(that,geoCoordMap,data,that.icon);
            option && myChart.setOption(option);

            /* ----------触发地图上标注点击事件----------------------------- */
            myChart.on('click',function(params){

            });
        },
        handleOption(that,geoCoordMap,data,icons){
            /* -----------------
            
                    处理数据
                将数据处理成
                [
                    {
                        name:'xxxx',
                        value[111,222,333] //数据都是number形式  前两个是经纬度 第三个是值  且想要地图上显示标注必须有value第三个参数
                    }
                ]
            -------------------------- */
            const convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            symbol:undefined
                        });
                    }
                }
                return res;
            };
            /* 
                定义 option
            */
            let option = {
                /* --------------------提示窗 => 点击触发------------------- */
                tooltip: {
                    trigger: 'item',
                    triggerOn :'click',
                    // 自定义背景: extraCssText:'background:url(/img/charts/indicator/tootip.png)'
                    /*  ------------------这里是 自定义返回 弹出样式---------- */
                    /* formatter:function(params){
                            return `<div></div>`
                        }
                    } */
                },
                /* -----------echarts扩展bMap------------------------ */
                bmap: {
                    center: [114.387825,30.660024], //中心纬度
                    zoom: 13, //调整初始化缩放程度
                    roam: true,//是否开启缩放 可以只设置 move 或者 scale
                    mapStyle: { // 定义百度地图map样式    ------->在个性化地图中有模板
                        styleJson:mapStyle.mapStyle()
                    }
                },
                series: [
                    {
                        name: 'Top 5', // 定义series 组名字
                        type: 'effectScatter', /* 带有涟漪特效动画的散点（气泡）图 */
                        coordinateSystem: 'bmap',/* 选择使用的地理坐标系 */
                        data: convertData(/* 处理数据 */data),
                        symbolSize: function (val) {/* 处理标记大小 */
                            return val[2] / 15;
                        },
                        itemStyle:{/* 定义标记样式 */
                            normal:{
                                color:'#00EBFC'
                            }
                        },
                    }
                ]
            };
            return option;
        }
    },
    mounted(){
        this.initEchartsOrbMap();
    },
}
</script>

<style scoped>
.container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>